<template>
  <div class="order-list">
    <div class="card-item" v-for="(order, i) in orderList" :key="i">
      <van-cell class="card-header" :title="`订单ID：${order.id}`" :label="`订单时间：${order.order_time}`" >
        <template #default>
          <span>{{orderStatus(order)}}</span>        
          <span v-if="order.status!=-1" @click="onClickOrderCancel(order.id)"> | 取消订单</span>
        </template>
      </van-cell>    
      <van-row v-for="item in order.detailList" :key="item.id" @click="onClick2OrderDetail(order.id)" >
        <van-col span="6">
          <van-image :src="APIDomainName + item.product_pic"></van-image>
        </van-col>
        <van-col span="18">
          <van-cell style="font-size: 16px;font-weight: bold;" :title="item.product_name"  class="van-ellipsis">
          </van-cell>
          <van-row style="padding-left: 20px;text-align: right;" type="flex" justify="space-between">
            <van-col span="5">{{item.price}}</van-col>
            <van-col span="4">X</van-col>
            <van-col span="5">{{item.count}}</van-col>
            <van-col span="3">=</van-col>
            <van-col span="7">{{item.price *item.count }}</van-col>
          </van-row>
        </van-col>
      </van-row>
      <div class="amount">
        实付金额：
        <span style="color:red">¥{{ orderAmount(order) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getOrderListAPI,
    cancleOrderByIdAPI
  } from "@/api/order.js";

  export default {
    data() {
      return {
        orderList: [],
      };
    },
    //生命周期钩子函数
    created() {
      this.getOrderList();
    },    

    methods: {
      //获取订单列表
      getOrderList() {
        getOrderListAPI().then(result => {
          this.orderList = result.data;
        });
      },
      // 触发导航到订单详情（此时该路由功能还没有实现）
      onClick2OrderDetail(id) {
        this.$router.push({
          name: "orderDetail",
          params: {
            id
          }
        });
      },
      // 触发取消订单
      onClickOrderCancel(id) {
        cancleOrderByIdAPI(id).then(()=>{
          this.initOrderList();
        });
      },
      //计算一个订单的总金额
      orderAmount(order){
        let amount = 0;
        order.detailList.forEach(item=>{
          amount += item.count * item.price;
        });
        return amount.toFixed(2);
      },
      //订单状态格式转换
      orderStatus(order){
        let status = "未知";
        switch (order.status){
          case 0:
            status = "未支付";
            break;
          case 1:
            status = "已支付";
            break;
          case -1:
            status = "已取消";
            break;
        }
        return status;
      },
    },
  };
</script>

<style lang="less" scoped>
  .order-list{
    background-color:#f3f3f3;
  }
  .card-item {
    margin: 10px;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    font-size: 16px;
  }
  .card-header {
    padding: 5px 5px;
    font-size: 16px;
    font-weight: bolder;
    display: flex;
    justify-content: space-between;
    ::v-deep .van-cell__value{      
      color: #070100;
    }
  }
  .amount {
    padding: 5px 5px;
    text-align: right;
    color: #6b6969;
    font-weight: bold;
    background-color: rgb(216, 219, 217);
  }
  .van-row--justify-space-between {
	  margin-top: 1rem;
  }
</style>
